import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, Picker} from '@tarojs/components'
import './index.less'
import {AtIcon, AtButton, AtInput} from 'taro-ui'

@connect(({searchMatch, houseHome, loading}) => ({
  searchMatch,
  houseHome,
  loading
}))

export default class SearchMatch extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {
      current: 0,

    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;
    // 获得区域信息
    dispatch({type: 'searchMatch/loadDistrict'})
  }

  // 切换类型
  handleType(item, name) {
    const { dispatch, searchMatch } = this.props;
    let d = searchMatch[name]||{};
    let ary = (d['id'] == item['id']) && (d['name'] == item['name'])
      ? { id: '', name: '' } : item
    dispatch({
      type: 'searchMatch/updateState',
      payload: {
        [name]: {
          ...ary
        }
      }
    })
  }

  // 立即匹配
  handelSubmit(item, name) {
    const { dispatch, searchMatch } = this.props;
    dispatch({ type: 'houseHome/initData' })
    dispatch({
      type: 'houseHome/updateState',
      payload: {
        houseType: { // 盘源
          type: searchMatch.houseType.id||'workshop',
          text: searchMatch.houseType.name||'厂房'
        },
        fireRate: { // 消防等级值
          type: searchMatch.fireRate.id||'workshop',
          text: searchMatch.fireRate.name||'厂房'
        },
        sellType: { // 购买形式值
          type: searchMatch.sellType.id||'workshop',
          text: searchMatch.sellType.name||'厂房'
        },
        districtType: searchMatch.districtType||0, // 区域
        floorType: { // 楼层
          text: '不限',
          value: searchMatch.floor||0,
        },
        areaType: { // 面积
          minArea: searchMatch.minArea||0,
          maxArea: searchMatch.maxArea||0,
          text: '不限'
        },
      }
    })
    Taro.navigateTo({
      url: `/pages/houseHome/index`
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }


  render() {
    const {
      searchMatch, dispatch
    } = this.props;

    const {
      houseTypeRange, houseType, sellType, sellRange,
      districtTypeRange, districtType, fireRateRange,
      floor, minArea, maxArea,fireRate
    } = searchMatch;

    const updateState = (obj) => {
      dispatch({
        type: 'searchMatch/updateState',
        payload: {
          ...obj
        }
      })
    }

    // 上传图片
    const uploadImg = (data) => {
      const {dispatch,searchMatch} = this.props;
      var i = data.i ? data.i : 0,//当前上传的哪张图片
        success = data.success ? data.success : 0,//上传成功的个数
        fail = data.fail ? data.fail : 0;//上传失败的个数
      // console.log(data.path[i])
      wx.uploadFile({
        url: data.url,
        filePath: data.path[i],
        name: 'file',//这里根据自己的实际情况改
        success: (resp) => {
          success++;//图片上传成功，图片上传成功的变量+1
          let {fileList} = searchMatch
          fileList.push(resp.data)
          console.dir(fileList)
          dispatch({
            type: 'searchMatch/updateState',
            payload: {
              fileList:  fileList
            }
          })
        },
        fail: (res) => {
          fail++;//图片上传失败，图片上传失败的变量+1
        },
        complete: () => {
          i++;//这个图片执行完上传后，开始上传下一张
          if (i == data.path.length) {   //当图片传完时，停止调用
            dispatch({
              type: 'searchMatch/updateState',
              payload: {
                imgloading: false
              }
            })
            wx.showToast({
              title: '上传图片完成！',
              icon: 'success'
            })
          } else {//若图片还没有传完，则继续调用函数
            data.i = i;
            data.success = success;
            data.fail = fail;
            uploadImg(data);
          }
        }
      })
    }
    return (
      <View className='searchMatch'>
        <View className='helpChode'>
          <image src={`../../images/searchMatch/banner.png`} mode="widthFix"/>
        </View>
        <View className='formBox'>
          <View className='codeName'>您想要找什么盘源？</View>
          <View className='choseType'>
            {houseTypeRange.map(item => {
              return <View
                key={item.id}
                className={houseType.id==item.id?'houseTypeOn':'houseType'}
                onClick={this.handleType.bind(this, item, 'houseType')}
              >{item.name}</View>
            })}
          </View>
          <View className='codeName'>您需要租赁还是购买？</View>
          <View className='choseType'>
            {sellRange.map(item => {
              return <View
                key={item.id}
                className={sellType.id==item.id?'houseTypeOn':'houseType'}
                onClick={this.handleType.bind(this, item, 'sellType')}
              >{item.name}</View>
            })}
          </View>
          <View className='codeName'>您想要什么消防等级？</View>
          <View className='choseType'>
            {fireRateRange.map(item => {
              return <View
                key={item.id}
                className={fireRate.id==item.id?'houseTypeOn':'houseType'}
                onClick={this.handleType.bind(this, item, 'fireRate')}
              >{item.name}</View>
            })}
          </View>
          <View className='codeName'>您想要找的区域是？</View>
          <View className='pickArea'>
            <Picker mode='selector' range={districtTypeRange} rangeKey="name"
              onChange={(e) => {
                updateState({ districtType: districtTypeRange[e.detail.value] })
              }}
            >
              <View className="text_child">
                <View className='address'>
                  <image src={`../../images/companyDetail/location.png`} mode="widthFix"/>
                  {districtType.name}
                </View>
                <View className='chevron'>
                  <AtIcon value='chevron-down' size='20' color='#dddddd'></AtIcon>
                </View>
              </View>
            </Picker>
          </View>
          <View className='codeName'>详细需求(选填)</View>
          <View className='codeBox'>
            <AtInput
              name='value'
              title='楼层'
              type='number'
              placeholder=''
              value={floor}
              onChange={(e) => {
                updateState({floor: e})
              }}
            />
          </View>
          <View className='codeBox'>
            <AtInput
              name='value'
              title='最小面积'
              type='number'
              placeholder=''
              value={minArea}
              onChange={(e) => {
                updateState({minArea: e})
              }}
            />
            <AtInput
              name='value'
              title='最大面积'
              type='number'
              placeholder=''
              value={maxArea}
              onChange={(e) => {
                updateState({maxArea: e})
              }}
            />
          </View>
          <View className='confirmBox'>
            <AtButton
              className='confirmStyle'
              type='primary'
              onClick={this.handelSubmit.bind(this)}
            >立即匹配</AtButton>
          </View>
        </View>
      </View>
    )
  }
}
